<template>
  <div class="repairWorkOrderDetail">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基本信息" name="first">
        <el-row :gutter="20">
          <el-col :span="10">
            <h4>基本信息</h4>
            <table class="table" rules="all" border="1">
              <tr>
                <td><span class="red">*</span>设备编号</td>
                <td>测试数据</td>
                <td>资产编号</td>
                <td>测试数据</td>
                <td>出厂编号</td>
                <td>测试数据</td>
              </tr>
              <tr>
                <td><span class="red">*</span>设备名称</td>
                <td>测试数据</td>
                <td>电子标签码</td>
                <td>测试数据</td>
                <td><span class="red">*</span>类别</td>
                <td>测试数据</td>
              </tr>
              <tr>
                <td><span class="red">*</span>品牌</td>
                <td>测试数据</td>
                <td><span class="red">*</span>规格型号</td>
                <td>测试数据</td>
                <td><span class="red">*</span>单位</td>
                <td>测试数据</td>
              </tr>
              <tr>
                <td>生产厂家</td>
                <td></td>
                <td>购置日期</td>
                <td>测试数据</td>
                <td>购置金额</td>
                <td>测试数据</td>
              </tr>
              <tr>
                <td>保修期</td>
                <td></td>
                <td>投产日期</td>
                <td>测试数据</td>
                <td>预计报废日期</td>
                <td>测试数据</td>
              </tr>
              <tr>
                <td><span class="red">*</span>设备状态</td>
                <td colspan="2">正常</td>
                <td>负责人</td>
                <td colspan="2"></td>
              </tr>
              <tr>
                <td>所属部门</td>
                <td colspan="5"></td>
              </tr>
              <tr>
                <td><span class="red">*</span>存放位置</td>
                <td colspan="5"></td>
              </tr>
              <tr>
                <td>是否开启管控</td>
                <td></td>
                <td>是否开启折旧</td>
                <td>是</td>
                <td>当前净值</td>
                <td>测试数据</td>
              </tr>
              <tr class="height">
                <td>理论生产节拍</td>
                <td colspan="5"></td>
              </tr>
              <tr class="height">
                <td>备注</td>
                <td colspan="5"></td>
              </tr>
            </table>
            <h4>折旧信息</h4>
            <table class="table" rules="all" border="1">
              <tr>
                <td><span class="red">*</span>使用寿命(月)</td>
                <td>360</td>
                <td><span class="red">*</span>初期净值</td>
                <td>测试数据</td>
                <el-tooltip  placement="bottom-start">
                  <div slot="content" style="width:200px;">资产的净残值是指资产报废时预计可收回的残余价值扣除预计清理费用后的余额。
                    根据《中华人民共和国企业所得税暂行条例及实施细则》第三十一条，内资企业固定资产预计净残值率统一为5%；根据《外商投资企业和外国企业所得税法实施细则》第三十三条的规定，外资企业固定资产预计净残值率一般为10%</div>
                    <td><span class="red">*</span>净残率(%) <i class="red el-icon-warning-outline"></i></td>
                </el-tooltip>
                <td>5</td>
              </tr>
              <tr>
                <td>折旧法</td>
                <td>测试数据</td>
                <td>月折旧额</td>
                <td colspan="3">385</td>
              </tr>
            </table>
            <h4>公共属性</h4>
            <table class="table" rules="all" border="1">
              <tr>
                <td colspan="2">设备机况</td>
                <td colspan="4">未选择</td>
              </tr>
            </table>
            <h4>设备图片</h4>
            <div class="image"></div>
          </el-col>
          <el-col :span="10">
            <h4>相关文件</h4>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
              :limit="3"
              :file-list="fileList">
            </el-upload>
            <h4>子设备</h4>
            <el-table border>
              <el-table-column label="设备编号" prop=""/>
              <el-table-column label="设备名称" prop=""/>
              <el-table-column label="设备品牌" prop=""/>
              <el-table-column label="规格型号" prop=""/>
            </el-table>
            <pagination
              :total="total"
              :page.sync="form.pageNum"
              :limit.sync="form.pageSize"
              @pagination="getList"
            />
            <h4>父设备</h4>
            <el-table border>
              <el-table-column label="设备编号" prop=""/>
              <el-table-column label="设备名称" prop=""/>
              <el-table-column label="设备品牌" prop=""/>
              <el-table-column label="规格型号" prop=""/>
            </el-table>
            <pagination
              :total="total"
              :page.sync="form.pageNum"
              :limit.sync="form.pageSize"
              @pagination="getList"
            />
            <h4>关联备件</h4>
            <el-table border>
              <el-table-column label="耗材编号" prop=""/>
              <el-table-column label="名称" prop=""/>
              <el-table-column label="品牌" prop=""/>
              <el-table-column label="分类" prop=""/>
              <el-table-column label="规格型号" prop=""/>
              <el-table-column label="单位" prop=""/>
              <el-table-column label="库存" prop=""/>
              <el-table-column label="需求量" prop=""/>
            </el-table>
            <pagination
              :total="total"
              :page.sync="form.pageNum"
              :limit.sync="form.pageSize"
              @pagination="getList"
            />
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="维修记录" name="second">
        <h4>维修记录</h4>
        <el-table border>
          <el-table-column label="报修时间" prop=""/>
          <el-table-column label="报修人" prop=""/>
          <el-table-column label="处理时间" prop=""/>
          <el-table-column label="处理人" prop=""/>
        </el-table>
        <pagination
          :total="total"
          :page.sync="form.pageNum"
          :limit.sync="form.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="养护记录" name="third">
        <h4>养护记录</h4>
        <el-table border>
          <el-table-column label="养护时间" prop=""/>
          <el-table-column label="养护人" prop=""/>
          <el-table-column label="费用" prop=""/>
          <el-table-column label="备注" prop=""/>
        </el-table>
        <pagination
          :total="total"
          :page.sync="form.pageNum"
          :limit.sync="form.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="调拨转移记录" name="fourth">
        <h4>调拨转移记录</h4>
        <el-table border>
          <el-table-column label="调拨日期" prop=""/>
          <el-table-column label="调入部门/地点" prop=""/>
          <el-table-column label="经手人" prop=""/>
        </el-table>
        <pagination
          :total="total"
          :page.sync="form.pageNum"
          :limit.sync="form.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="更换记录" name="five">
        <h4>更换记录</h4>
        <el-table border>
          <el-table-column label="更换时间" prop=""/>
          <el-table-column label="更换原因" prop=""/>
          <el-table-column label="耗材编号" prop=""/>
          <el-table-column label="耗材名称" prop=""/>
          <el-table-column label="品牌" prop=""/>
          <el-table-column label="分类" prop=""/>
          <el-table-column label="规格型号" prop=""/>
          <el-table-column label="单位" prop=""/>
          <el-table-column label="数量" prop=""/>
          <el-table-column label="关联单号" prop=""/>
        </el-table>
        <pagination
          :total="total"
          :page.sync="form.pageNum"
          :limit.sync="form.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="点检记录" name="six">
        <h4>点检记录</h4>
        <el-table border>
          <el-table-column label="点检日期" prop=""/>
          <el-table-column label="点检人" prop=""/>
          <el-table-column label="异常个数" prop=""/>
        </el-table>
        <pagination
          :total="total"
          :page.sync="form.pageNum"
          :limit.sync="form.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="计量记录" name="seven">
        <h4>计量记录</h4>
        <el-table border>
          <el-table-column label="任务编号" prop=""/>
          <el-table-column label="计划编号" prop=""/>
          <el-table-column label="处理人" prop=""/>
          <el-table-column label="计划处理时间" prop=""/>
          <el-table-column label="实际处理时间" prop=""/>
          <el-table-column label="结果" prop=""/>
        </el-table>
        <pagination
          :total="total"
          :page.sync="form.pageNum"
          :limit.sync="form.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
  export default {
    name: "repairWorkOrderDetail.vue",
    data() {
      return {
        activeName: 'first',
        detailForm: '',
        total: 0,
        form: {
          pageNum: 1,
          pageSize: 10,
        },
        fileList: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }, {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }]

      }
    },
    created() {
      this.detailForm = this.$route.query.data
    },
    methods: {
      getList() {

      }
    }
  }
</script>

<style scoped lang="scss">
  .repairWorkOrderDetail {
    margin-left: 20px;

    .el-tabs {
      margin-top: 20px;

      h4 {
        color: #05A380;
      }

      .table {
        border: 1px solid #cccccc;
        color: #606266;
        font-size: 14px;
        width: 100%;

        .height {
          height: 120px;
        }

        tr {
          td:nth-child(2n-1) {
            width: 10%;
            text-align: center;
          }

          td:nth-child(2n) {
            width: 20%;
            padding-left: 10px;
          }

          td {
            line-height: 35px;

            .red {
              color: red;
              padding-right: 3px;
            }
          }
        }
      }
    }
  }
</style>
